在前端开发中可能会遇到一些频发触发的事件,例如
- window 的 resize(浏览器窗口或者HTML对象改变大小)、scroll(滚动条事件)
- mousedown(鼠标在元素上按下事执行事件)、onmousemove(鼠标指针移动到元素上触发)
- keyup(按键被释放触发)、keydown(按键被按下触发) 举例
1 | HTML |
1 | dome.js |
效果如下
从图上可以看到从左边到右边一共触发了160多次onmousemove事件,同样执行了160多次getUserAction函数。
因为这个例子简单,浏览器可以处理的过来,如果换成请求, 频繁触发就会出现卡顿。
修改一下
1 | dome.js |
上面这个函数
分析一下上面的操作
- 鼠标移动触发onmousemove事件。
- onmousemove事件调用debounce函数
- debounce函数接收到getUserAction, 1000函数之后返回一个匿名函数-清除前面的定时器-执行新的定时器
然后只要鼠标移动就会1-2-3执行,直至鼠标停留超过一秒,才会执行getUserAction函数。
JavaScript节流
节流就是如果持续触发事件,则每个一段时间,只执行一次事件。
主流有两种方法:使用时间戳
, 设置定时器
使用时间戳
使用时间戳,当事件触发时,去除当前的时间戳,然后减去之前的时间戳,最开始可以设置为0,如果大于设置的时间周期,就执行函数,然后更新时间戳为当前时间戳,如果小于,则不执行。
1 | function throttle(fu, wait) { |
使用定时器
当事件被触发的时候设置一个定时器,在触发事件,如果定时器存在则不执行,直至定时器执行然后执行函数,清空定时器。
1 | function throttle(fn, wait) { |